<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="download">下载</button>
<div>正在下载 <span id="download-name"></span></div>

<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  function downloadFile(url, name) {
    let a = document.createElement("a");
    a.href = url;
    a.download = name;
    a.click();
  }

  download.onclick = async function () {
    // 图片链接
  const http = new XMLHttpRequest()
  var result = []
  var imgs = []
  http.open('POST','http://localhost/download')
  http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  http.send()
  http.onreadystatechange = async function()
  {
      if(http.readyState == 4 && http.status == 200)
      {
          result = JSON.parse(http.responseText)
          imgs = [result[0]['picurl']]
          //imgs = ["http://localhost/picture/18888888888p1/0.jpg"]
          console.log(imgs)
          var zip = new JSZip();
          for (let url of imgs) {
          let fileName = url.split("/").reverse()[0];
          let { data } = await axios({
              method: "get",
              url,
              responseType: "blob",
          });
          window["download-name"].innerText = fileName;
          zip.file(fileName, data);
          }
          zip.generateAsync({ type: "blob" }).then(function (content) {
          let url = window.URL.createObjectURL(content);
          downloadFile(url, "images");
          });
      }
  }
};
</script>

</body>
</html>